<template>
    <div id="box">
        <div class="merchantInfo">
            <div class="merchantInfoCon">
                <div class="merchantAddress">
                    <i class="el-icon-location-outline"></i>
                    <span>
                        <p>商家地址： </p>
                        <p>{{shop.shopAddress}}</p>
                    </span>
                </div>
                <div class="merchantPhone">
                    <i class="el-icon-phone-outline"></i>
                    <span>
                        <p>商家电话： </p>
                        <p>{{shop.shopPhone}}</p>
                    </span>
                </div>
                <div class="merchantOfficeTime">
                    <i class="el-icon-time"></i>
                    <span>
                        <p>营业时间： </p>
                        <p>{{shop.officeTime}} - {{shop.closingTime}}</p>
                    </span>
                </div>
                <div class="merchantRegTime">
                    <i class="el-icon-date"></i>
                    <span>
                        <p>注册时间： </p>
                        <p>{{shop.registerTime}}</p>
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props:['shop'],
        name: "merchantInfo"
    }
</script>

<style lang="less" scoped>
    #box{
        height: 600px;
        overflow: scroll;
        width: 100%;
        background-color: whitesmoke;
    }
    .merchantInfo{
        margin-top: 10px;
        width: 100%;
        display: flex;
        justify-content: center;
        background-color: white;
        .merchantInfoCon{
            width: 95%;
            div:not(:last-child){
                border-bottom: 1px solid #F5F5F4;
            }
            div{
                padding: 10px 0;
                display: flex;
                align-items: center;
                i{
                    font-size: 25px;
                    padding-right: 10px;
                }
                span{
                    display: flex;
                    p:first-child{
                        min-width: 80px;
                        display: flex;
                        align-items: center;
                    }
                }
            }
        }
    }
</style>